<template>
  <div class="app-container">
    <el-card>
      <!-- 查询 -->
      <div class="filter-container">
        <!-- <el-alert
          title="温馨提示：1.新增商品时可选统一规格或者多规格，满足商品不同销售属性场景；2.商品销售状态分为销售中且库存足够时才可下单购买"
          type="warning"
          show-icon
          class="goodsaletr"
        /> -->
        <el-row :gutter="20" class="marginTop">
          <el-form :inline="true" class="search-form">
            <el-form-item label="关键字">
              <el-input
                v-model="searchForm.keywords"
                placeholder="关键字查询支持商品名、ID、副标题、编码"
                clearable
                style="width: 260px;"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="商品类目">
              <el-cascader
                v-model="searchForm.cate_id"
                :options="categoryList"
                :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                clearable
              />
            </el-form-item>

            <el-form-item label="供应商">
              <el-select v-model="searchForm.supplier_id" placeholder="请选择供应商" clearable>
                <el-option
                  v-for="item, index in supplierList"
                  :key="index"
                  :label="item.supplier_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="标签">
              <el-select v-model="searchForm.label_id" multiple placeholder="请选择标签" clearable>
                <el-option-group v-for="group in labelList" :key="group.label" :label="group.category_name">
                  <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id" />
                </el-option-group>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button size="mini" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resettingWay">重置</el-button>
            </el-form-item>

          </el-form>
        </el-row>
      </div>
    </el-card>

    <el-card class="grouping" style="margin-top: 20px">
      <!-- <div>
        <el-tabs v-model="searchForm.state" style="height: 66px" @tab-click="tabsListWay">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="售罄" name="sellout" />
          <el-tab-pane label="库存预警" name="stock" />
          <el-tab-pane label="回收站" name="del " />
        </el-tabs>
      </div> -->
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <!-- <el-button type="primary" size="small" @click="addGoodsWay()">添加商品</el-button> -->
            <!-- <el-button type="primary" size="small" @click="goodsadd()">选择商品</el-button> -->
            <!-- <el-button type="primary" size="small">批量下架</el-button> -->
            <!-- <el-button type="primary" size="small">导出商品</el-button> -->
          </el-col>
          <el-col :span="8" style="float:right;">
            <div class="right-panel el-button-group">
              <el-button class="" icon="el-icon-refresh" size="mini" @click="resettingWay" />
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button class="" icon="el-icon-s-operation" size="mini" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            :data="GoodsList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            :row-key="row=>row.id"
            @selection-change="handleSelectionChange"
            @expand-change="handleExpandChange"
          >
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-form :ref="'chooseGoodsSkuFormRef'+scope.row.id" :model="chooseGoodsSkuForm" :rules="chooseGoodsSkuFormRules" size="mini" style="width:100%;">
                  <el-table
                    :data="scope.row.product"
                    border
                    stripe
                  >

                    <el-table-column
                      prop="id"
                      label="规格ID"
                      width="80"
                      align="center"
                    />
                    <el-table-column
                      prop="goods_id"
                      label="商品ID"
                      width="80"
                      align="center"
                    />
                    <el-table-column
                      prop="inventory"
                      label="当前库存"
                      width="100"
                      align="center"
                    />
                    <el-table-column
                      prop="retail_price"
                      label="当前售价"
                      width="100"
                      align="center"
                    />
                    <el-table-column
                      label="秒杀价格(单位:元)"
                      align="center"
                    >
                      <template slot-scope="scope">

                        <el-form-item
                          prop="price"
                          :rules="chooseGoodsSkuFormRules.price"
                        >
                          <el-input-number
                            v-model="scope.row.price"
                            style="width:100%"
                            size="mini"
                            :min="0.01"
                            :step="1"
                            :controls="true"
                            controls-position="both"
                          />
                        </el-form-item>

                      </template>
                    </el-table-column>
                    <el-table-column
                      label="最多秒杀个数"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          prop="num"
                          :rules="chooseGoodsSkuFormRules.num"
                        >
                          <el-input-number
                            v-model="scope.row.num"
                            style="width:100%"
                            size="mini"
                            :min="1"
                            :step="1"
                            :controls="true"
                            controls-position="both"
                          />
                        </el-form-item>

                      </template>
                    </el-table-column>
                    <el-table-column
                      label="配送方式"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          prop="postage"
                          :rules="chooseGoodsSkuFormRules.postage"
                        >

                          <el-select v-model="scope.row.postage" placeholder="配送方式" style="width:100%" clearable>
                            <el-option
                              label="快递"
                              value="1"
                            />
                            <el-option
                              label="自提"
                              value="2"
                            />
                          </el-select>
                        </el-form-item>

                      </template>
                    </el-table-column>
                    <el-table-column
                      label="秒杀库存"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          prop="inventory1"
                          :rules="chooseGoodsSkuFormRules.inventory1"
                        >
                          <el-input-number
                            v-model="scope.row.inventory1"
                            style="width:100%"
                            size="mini"
                            :min="1"
                            :max="scope.row.inventory"
                            :step="1"
                            :controls="true"
                            controls-position="both"
                          />
                        </el-form-item>

                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="doCancelCurrentSku(scope.row,scope.$index)">取消</el-button>
                        <el-button type="primary" size="mini" @click="doSaveCurrentSku(scope.row,scope.$index)">确定</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </template>
            </el-table-column>

            <el-table-column align="center" type="selection" reserve-selection />
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit] }}
              </template>
            </el-table-column>

            <el-table-column align="center" prop="main_image" label="商品主图" min-width="40">
              <template slot-scope="scope">
                <el-image v-if="scope.row.main_image" :src="scope.row.main_image" />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="thumbnail" label="缩略图" min-width="40">
              <template slot-scope="scope">
                <el-image v-if="scope.row.thumbnail" :src="scope.row.thumbnail" />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="type" label="商品类型">
              <template slot-scope="scope">
                {{ scope.row.tag_name }}
                <el-tag v-if="scope.row.type == 1" size="mini">平台商品</el-tag>
                <el-tag v-else size="mini"> 商户商品</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="上下架">
              <template slot-scope="scope">
                <!-- <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="goods_idWay(scope.row)"
                /> -->
                <!-- 状态：1上架0下架 -->
                <el-tag v-if="scope.row.status == 1" type="success" size="mini" effect="dark">上架</el-tag>
                <el-tag v-else type="danger" size="mini" effect="dark">下架</el-tag>

              </template>
            </el-table-column>
            <el-table-column align="center" label="库存">
              <template slot-scope="scope">
                <span>{{ scope.row.product[0].inventory }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="notes" label="备注" />

          </el-table>
        </el-col>
        <el-col class="marginTop" style="text-align: right">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10,20,30,40]"
            :page-size="searchForm.count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 详情 -->
    <el-drawer title="商品详情" :visible.sync="goodsInfoDrawer" direction="rtl" size="800px" @close="resettingFormWay">
      <div v-loading="selectProduct" style="padding: 0 30px">
        <p class="title">{{ ruleForm.name }}</p>
        <p class="sn">商品副标题：{{ ruleForm.subtitle }}</p>
        <p class="sn">商品编码：{{ ruleForm.bn }}</p>
        <p>
          <el-button v-if="modifyShow" type="primary" @click="modifyShowCloseWay">取消</el-button>
          <el-button type="primary" @click="modifyShowWay">{{ !modifyShow ? '编辑' : '保存' }}</el-button>
        </p>
        <el-tabs v-model="addGoodsTabs">
          <el-tab-pane label="基本信息" name="基本信息">
            <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品名称" prop="name">
                  <el-input v-model="ruleForm.name" maxlength="20" show-word-limit placeholder="请输入商品名称" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品名称" prop="name">
                  <span>{{ ruleForm.name }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="编码" prop="bn">
                  <el-input
                    v-model="ruleForm.bn"
                    onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入商品编码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="编码" prop="bn">
                  <span>{{ ruleForm.bn }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="副标题" prop="subtitle">
                  <el-input v-model="ruleForm.subtitle" maxlength="50" show-word-limit placeholder="请输入商品副标题" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="24">
                <el-form-item label="副标题" prop="subtitle">
                  <span>{{ ruleForm.subtitle }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="商品类型" prop="type">
                  <el-radio v-model="ruleForm.type" :label="1" border size="mini">普通商品</el-radio>
                  <el-radio v-model="ruleForm.type" :label="2" border size="mini">卡密商品</el-radio>
                  <el-radio v-model="ruleForm.type" :label="3" border size="mini">虚拟商品</el-radio>
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品类型" prop="type">
                  <el-tag v-if="ruleForm.type == 1" size="mini">普通商品</el-tag>
                  <el-tag v-if="ruleForm.type == 2" size="mini">卡密商品</el-tag>
                  <el-tag v-if="ruleForm.type == 3" size="mini">虚拟商品</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品标签" prop="goods_label">
                  <el-select v-model="ruleForm.goods_label" multiple placeholder="请选择标签">
                    <el-option v-for="item, index in unitList" :key="index" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品标签" prop="goods_label">
                  <el-tag
                    v-for="item, index in ruleForm.goods_label_name"
                    :key="index"
                    style="margin:0 10px"
                    size="mini"
                  >{{
                    item }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品类目" prop="category_id1">
                  <el-cascader
                    v-model="cate_id"
                    :options="categoryList"
                    :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                    clearable
                    @change="cate_idWay"
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品类目" prop="category_id1">
                  <el-tag v-if="ruleForm.category1_name" size="mini">{{ ruleForm.category1_name }}</el-tag>
                  <el-tag v-if="ruleForm.category2_name" size="mini">{{ ruleForm.category2_name }}</el-tag>
                  <el-tag v-if="ruleForm.category3_name" size="mini">{{ ruleForm.category3_name }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品状态" prop="status">
                  <el-radio v-model="ruleForm.status" :label="1" size="mini">上架</el-radio>
                  <el-radio v-model="ruleForm.status" :label="0" size="mini">下架</el-radio>
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品状态" prop="status">
                  <el-tag v-if="ruleForm.status == 1" size="mini">已上架</el-tag>
                  <el-tag v-if="ruleForm.status == 0" type="danger" size="mini">已下架</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品排序" prop="sort">
                  <el-input
                    v-model="ruleForm.sort"
                    onkeyup="value=value.replace(/\D/g,'')"
                    maxlength="10"
                    show-word-limit
                    type="text"
                    placeholder="请输入排序"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品主图" prop="main_image">
                  <logo-upload
                    :single-file="main_image"
                    :show-file-list="false"
                    accept="image/jpeg, image/png"
                    style="width: 90px;height: 90px;"
                    @uploadCallback="mainImageBack"
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品主图" prop="main_image">
                  <div style="display: flex;">
                    <el-image style="width: 60px;height: 60px;margin: 0 10px;" :src="main_image.url" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="商品缩略图" prop="thumbnail">
                  <logo-upload
                    :single-file="thumbnail"
                    :show-file-list="false"
                    accept="image/jpeg, image/png"
                    style="width: 90px;height: 90px;"
                    @uploadCallback="thumbnailBack"
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="8">
                <el-form-item label="商品缩略图" prop="thumbnail">
                  <div style="display: flex;">
                    <el-image style="width: 60px;height: 60px;margin: 0 10px;" :src="thumbnail.url" />
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="商品轮播图" prop="carousel">
                  <logo-upload
                    :file-list="carousel"
                    :show-file-list="true"
                    accept="image/jpeg, image/png"
                    @uploadCallback="carouselBack"
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="24">
                <el-form-item label="商品轮播图" prop="carousel">
                  <div style="display: flex;">
                    <el-image
                      v-for="item, index in carousel"
                      :key="index"
                      style="width: 60px;height: 60px;margin: 0 10px;"
                      :src="item.url"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="备注" prop="notes">
                  <el-input
                    v-model="ruleForm.notes"
                    type="textarea"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入备注"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="24">
                <el-form-item label="备注" prop="notes">
                  <span>{{ ruleForm.notes ? ruleForm.notes : '无' }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="销售设置" name="销售设置">
            <el-form ref="saleForm" :rules="sales" :model="saleForm" label-width="120px" class="demo-ruleForm">
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="销售倍数区间" prop="sales_multiplier">
                  <el-input
                    v-model="saleForm.sales_multiplier"
                    maxlength="3"
                    show-word-limit
                    placeholder="请输入销售倍数区间"
                    clearable
                  />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:1-5,销量会乘以1-5随机数</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="销售倍数区间" prop="sales_multiplier">
                  <span>{{ saleForm.sales_multiplier }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="关联用户标签" prop="related_user_tag">
                  <el-select v-model="related_user_tag" multiple placeholder="请选择商品标签">
                    <el-option-group v-for="group in labelList" :key="group.label" :label="group.category_name">
                      <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id" />
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item v-if="related_user_tag_name" label="关联用户标签" prop="related_user_tag">
                  <el-tag v-for="item, index in related_user_tag_name" :key="index" style="margin:0 10px" size="mini">{{
                    item }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="关联用户分组" prop="related_user_group">
                  <el-select v-model="saleForm.related_user_group" clearable placeholder="请选择分组">
                    <el-option v-for="item in userGroupList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item v-if="saleForm.cover_group_name" label="关联用户分组" prop="related_user_group">
                  <el-tag size="mini">{{ saleForm.cover_group_name }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="22">
                <el-form-item label="关联省市区地域" prop="cover_region_json">
                  <el-cascader
                    v-model="cascaderRegList"
                    style="width:100%"
                    :options="regionList"
                    collapse-tags
                    :props="{ multiple: true, value: 'id', label: 'name', children: 'children', checkStrictly: true }"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="22">
                <el-form-item label="关联省市区地域" prop="cover_region_json">
                  <el-tag
                    v-for="item, index in saleForm.cover_region_name_list"
                    :key="index"
                    style="margin:0 0 10px 0"
                    size="mini"
                  >{{
                    item }}</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="是否优选推荐" prop="is_recommendation">
                  <el-radio v-model="saleForm.is_recommendation" label="1" size="mini">是</el-radio>
                  <el-radio v-model="saleForm.is_recommendation" label="0" size="mini">否</el-radio>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="是否优选推荐" prop="is_recommendation">
                  <el-tag v-if="saleForm.is_recommendation == 1" size="mini">是</el-tag>
                  <el-tag v-else type="danger" size="mini">否</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="是否限购" prop="is_restricted">
                  <el-radio v-model="saleForm.is_restricted" label="1" size="mini">是</el-radio>
                  <el-radio v-model="saleForm.is_restricted" label="0" size="mini">否</el-radio>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="是否限购" prop="is_restricted">
                  <el-tag v-if="saleForm.is_restricted == 1" size="mini">是</el-tag>
                  <el-tag v-else type="danger" size="mini">否</el-tag>
                </el-form-item>
              </el-col>
              <el-col v-if="saleForm.is_restricted == 1 && modifyShow" :span="12">
                <el-form-item label="每日限购数量" prop="daily_purchase_limit">
                  <el-input
                    v-model="saleForm.daily_purchase_limit"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入限购数量"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="saleForm.is_restricted == 1 && !modifyShow" :span="12">
                <el-form-item label="每日限购数量" prop="daily_purchase_limit">
                  <span>{{ saleForm.daily_purchase_limit }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="saleForm.is_restricted == 1 && modifyShow" :span="12">
                <el-form-item label="用户总限购数量" prop="total_purchase_limit">
                  <el-input
                    v-model="saleForm.total_purchase_limit"
                    type="number"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入限购数量"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="saleForm.is_restricted == 1 && !modifyShow" :span="12">
                <el-form-item label="用户总限购数量" prop="total_purchase_limit">
                  <span>{{ saleForm.total_purchase_limit }}</span>

                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="库存规格" name="库存规格">
            <el-form
              ref="inventoryForm"
              :rules="inventorys"
              :model="inventoryForm"
              label-width="90px"
              class="demo-ruleForm"
            >
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="图片" prop="image">
                  <logo-upload
                    :single-file="image"
                    :show-file-list="false"
                    accept="image/jpeg, image/png"
                    style="width: 90px;height: 90px;"
                    @uploadCallback="imageBack"
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="图片" prop="image">
                  <el-image style="width: 60px;height: 60px;margin: 0 10px;" :src="image.url" />
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="初始销量" prop="initial_sales">
                  <el-input
                    v-model="inventoryForm.initial_sales"
                    maxlength="3"
                    show-word-limit
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入初始销量"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="初始销量" prop="initial_sales">
                  <span>{{ inventoryForm.initial_sales }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="原售价" prop="scribe_price">
                  <el-input v-model="inventoryForm.scribe_price" type="number" placeholder="请输入原售价" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="原售价" prop="scribe_price">
                  <span>{{ inventoryForm.scribe_price }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="零售价" prop="retail_price">
                  <el-input v-model="inventoryForm.retail_price" type="number" placeholder="请输入零售价" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="零售价" prop="retail_price">
                  <span>{{ inventoryForm.retail_price }}</span>

                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="成本价" prop="cost_price">
                  <el-input v-model="inventoryForm.cost_price" type="number" placeholder="请输入成本价" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="成本价" prop="cost_price">
                  <span>{{ inventoryForm.cost_price }}</span>

                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="库存" prop="inventory">
                  <el-input v-model="inventoryForm.inventory" type="number" disabled placeholder="请输入库存" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="库存" prop="inventory">
                  <span>{{ inventoryForm.inventory }}</span>

                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="SKU" prop="sku">
                  <el-input v-model="inventoryForm.sku" placeholder="请输入sku" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="SKU" prop="sku">
                  <span>{{ inventoryForm.sku }}</span>

                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="库存预警" prop="inventory_alert">
                  <el-input
                    v-model="inventoryForm.inventory_alert"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入库存预警"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="库存预警" prop="inventory_alert">
                  <span>{{ inventoryForm.inventory_alert }}</span>

                </el-form-item>
              </el-col>
              <el-col v-if="modifyShow" :span="12">
                <el-form-item label="单位" prop="unit">
                  <el-input v-model="inventoryForm.unit" maxlength="5" show-word-limit placeholder="请输入单位" clearable />
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="单位" prop="unit">
                  <span>{{ inventoryForm.unit }}</span>

                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="支付设置" name="支付设置">
            <el-form ref="payForm" :rules="pays" :model="payForm" label-width="110px" class="demo-ruleForm">
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="商品类型" prop="type">
                  <el-radio
                    v-for="item, index in payTypeList"
                    :key="index"
                    v-model="payForm.type"
                    :label="item.tag_value"
                    size="mini"
                  >{{ item.tag_name }}</el-radio>
                </el-form-item>
              </el-col>
              <el-col v-else :span="24">
                <el-form-item label="商品类型" prop="type">
                  <span v-for="item, index in payTypeList" :key="index">
                    <el-tag v-if="payForm.type == item.tag_value" style="margin:0 5px" size="mini">{{ item.tag_name
                    }}</el-tag>
                  </span>
                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 1 || payForm.type == 5 || payForm.type == 6 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="所需余额数量" prop="balance_price">
                  <el-input v-model="payForm.balance_price" placeholder="请输入所需余额数量" clearable />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付余额的数量</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="所需余额数量" prop="balance_price">
                  <span>{{ payForm.balance_price }}</span>
                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 1 || payForm.type == 5 || payForm.type == 6 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="余额手续费" prop="balance_scale">
                  <el-input
                    v-model="payForm.balance_scale"
                    maxlength="3"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入余额手续费"
                    clearable
                  />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="余额手续费" prop="balance_scale">
                  <span>{{ payForm.balance_scale }}</span>
                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 2 || payForm.type == 4 || payForm.type == 5 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="所需积分数量" prop="integral_price">
                  <el-input v-model="payForm.integral_price" placeholder="请输入所需积分数量" clearable />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付积分的数量</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="所需积分数量" prop="integral_price">
                  <span>{{ payForm.integral_price }}</span>

                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 2 || payForm.type == 4 || payForm.type == 5 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="积分手续费" prop="integral_scale">
                  <el-input
                    v-model="payForm.integral_scale"
                    maxlength="3"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入积分手续费"
                    clearable
                  />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="积分手续费" prop="integral_scale">
                  <span>{{ payForm.integral_scale }}</span>
                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 3 || payForm.type == 4 || payForm.type == 6 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="所需提货券数量" prop="voucher_price">
                  <el-input v-model="payForm.voucher_price" placeholder="请输入所需提货券数量" clearable />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付提货券的数量</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="所需提货券数量" prop="voucher_price">
                  <span>{{ payForm.voucher_price }}</span>
                </el-form-item>
              </el-col>
              <el-col
                v-if="(payForm.type == 3 || payForm.type == 4 || payForm.type == 6 || payForm.type == 7) && modifyShow"
                :span="12"
              >
                <el-form-item label="提货券手续费" prop="voucher_scale">
                  <el-input
                    v-model="payForm.voucher_scale"
                    type="number"
                    maxlength="3"
                    onkeyup="value=value.replace(/\D/g,'')"
                    placeholder="请输入提货券手续费"
                    clearable
                  />
                  <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                </el-form-item>
              </el-col>
              <el-col v-else :span="12">
                <el-form-item label="提货券手续费" prop="voucher_scale">
                  <span>{{ payForm.voucher_scale }}</span>
                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品详情" name="商品详情">
            <el-form label-width="90px" class="demo-ruleForm">
              <el-col v-if="modifyShow" :span="24">
                <el-form-item label="商品详情">
                  <tinymce-editor v-if="ruleForm.goods_detail" v-model="ruleForm.goods_detail" :height="500" />
                </el-form-item>
              </el-col>
              <el-col v-else :span="24">
                <el-form-item label="商品详情">
                  <div v-html="ruleForm.goods_detail" />
                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- // 添加商品弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="addGoodsDialog"
      width="800px"
      :before-close="addGoodsClose"
    >
      <el-row :gutter="20">
        <el-form label-width="80px" class="demo-ruleForm">
          <el-col :span="22" style="margin: 0 auto;">
            <el-form-item label="选择商品" prop="name">
              <el-select
                v-model="ruleForm.supplier_goods_id"
                style="width: 100%;"
                filterable
                remote
                reserve-keyword
                placeholder="请输入商品名称"
                :remote-method="remoteMethodWay"
                :loading="selectLoading"
                @change="selectGoodsWay"
              >
                <el-option v-for="item in goodsList" :key="item.id" :label="item.goods_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row v-loading="selectProduct" :gutter="20" element-loading-text="请选择商品之后操作" element-loading-spinner="none">
        <el-col :span="22" style="margin: 0 auto;">
          <el-tabs v-model="addGoodsTabs">
            <el-tab-pane label="基本信息" name="基本信息">
              <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="90px" class="demo-ruleForm">
                <el-col :span="12">
                  <el-form-item label="商品名称" prop="name">
                    <el-input v-model="ruleForm.name" maxlength="20" show-word-limit placeholder="请输入商品名称" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="编码" prop="bn">
                    <el-input
                      v-model="ruleForm.bn"
                      onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                      maxlength="20"
                      show-word-limit
                      placeholder="请输入商品编码"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="副标题" prop="subtitle">
                    <el-input
                      v-model="ruleForm.subtitle"
                      maxlength="50"
                      show-word-limit
                      placeholder="请输入商品副标题"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="商品类型" prop="type">
                    <el-radio v-model="ruleForm.type" :label="1" border size="mini">普通商品</el-radio>
                    <el-radio v-model="ruleForm.type" :label="2" border size="mini">卡密商品</el-radio>
                    <el-radio v-model="ruleForm.type" :label="3" border size="mini">虚拟商品</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品标签" prop="goods_label">
                    <el-select v-model="ruleForm.goods_label" multiple placeholder="请选择标签">
                      <el-option v-for="item, index in unitList" :key="index" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品类目" prop="category_id1">
                    <el-cascader
                      v-model="cate_id"
                      :options="categoryList"
                      :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children' }"
                      clearable
                      @change="cate_idWay"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品状态" prop="status">
                    <el-radio v-model="ruleForm.status" :label="1" size="mini">上架</el-radio>
                    <el-radio v-model="ruleForm.status" :label="0" size="mini">下架</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品排序" prop="sort">
                    <el-input
                      v-model="ruleForm.sort"
                      type="text"
                      onkeyup="value=value.replace(/\D/g,'')"
                      maxlength="10"
                      show-word-limit
                      placeholder="请输入排序"
                      clearable
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="商品主图" prop="main_image">
                    <logo-upload
                      :single-file="main_image"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      style="width: 90px;height: 90px;"
                      @uploadCallback="mainImageBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品缩略图" prop="thumbnail">
                    <logo-upload
                      :single-file="thumbnail"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      style="width: 90px;height: 90px;"
                      @uploadCallback="thumbnailBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="商品轮播图" prop="carousel">
                    <logo-upload
                      :file-list="carousel"
                      :show-file-list="true"
                      accept="image/jpeg, image/png"
                      @uploadCallback="carouselBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="notes">
                    <el-input
                      v-model="ruleForm.notes"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      placeholder="请输入备注"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="销售设置" name="销售设置">
              <el-form ref="saleForm" :rules="sales" :model="saleForm" label-width="110px" class="demo-ruleForm">
                <el-col :span="12">
                  <el-form-item label="销售倍数区间" prop="sales_multiplier">
                    <el-input
                      v-model="saleForm.sales_multiplier"
                      maxlength="3"
                      show-word-limit
                      placeholder="请输入销售倍数区间"
                      clearable
                    />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:1-5,销量会乘以1-5随机数</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联用户标签" prop="related_user_tag">
                    <el-select v-model="related_user_tag" multiple placeholder="请选择商品标签">
                      <el-option-group v-for="group in labelList" :key="group.label" :label="group.category_name">
                        <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id" />
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联用户分组" prop="related_user_group">
                    <el-select v-model="saleForm.related_user_group" clearable placeholder="请选择分组">
                      <el-option v-for="item in userGroupList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="22">
                  <el-form-item label="关联省市区地域" prop="cover_region_json">
                    <el-cascader
                      v-model="cascaderRegList"
                      style="width:100%"
                      :options="regionList"
                      collapse-tags
                      :props="{ multiple: true, value: 'id', label: 'name', children: 'children', checkStrictly: true }"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否优选推荐" prop="is_recommendation">
                    <el-radio v-model="saleForm.is_recommendation" label="1" size="mini">是</el-radio>
                    <el-radio v-model="saleForm.is_recommendation" label="0" size="mini">否</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否限购" prop="is_restricted">
                    <el-radio v-model="saleForm.is_restricted" label="1" size="mini">是</el-radio>
                    <el-radio v-model="saleForm.is_restricted" label="0" size="mini">否</el-radio>
                  </el-form-item>
                </el-col>
                <el-col v-if="saleForm.is_restricted == 1" :span="12">
                  <el-form-item label="每日限购数量" prop="daily_purchase_limit">
                    <el-input
                      v-model="saleForm.daily_purchase_limit"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-if="saleForm.is_restricted == 1" :span="12">
                  <el-form-item label="用户总限购数量" prop="total_purchase_limit">
                    <el-input
                      v-model="saleForm.total_purchase_limit"
                      type="number"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="库存规格" name="库存规格">
              <el-form
                ref="inventoryForm"
                :rules="inventorys"
                :model="inventoryForm"
                label-width="90px"
                class="demo-ruleForm"
              >
                <el-col :span="12">
                  <el-form-item label="图片" prop="image">
                    <logo-upload
                      :single-file="image"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      style="width: 90px;height: 90px;"
                      @uploadCallback="imageBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="初始销量" prop="initial_sales">
                    <el-input
                      v-model="inventoryForm.initial_sales"
                      maxlength="3"
                      show-word-limit
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入初始销量"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="原售价" prop="scribe_price">
                    <el-input v-model="inventoryForm.scribe_price" type="number" placeholder="请输入原售价" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="零售价" prop="retail_price">
                    <el-input v-model="inventoryForm.retail_price" type="number" placeholder="请输入零售价" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="成本价" prop="cost_price">
                    <el-input v-model="inventoryForm.cost_price" type="number" placeholder="请输入成本价" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="库存" prop="inventory">
                    <el-input
                      v-model="inventoryForm.inventory"
                      type="number"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入库存"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="SKU" prop="sku">
                    <el-input v-model="inventoryForm.sku" placeholder="请输入sku" clearable />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="库存预警" prop="inventory_alert">
                    <el-input
                      v-model="inventoryForm.inventory_alert"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入库存预警"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单位" prop="unit">
                    <el-input v-model="inventoryForm.unit" maxlength="5" show-word-limit placeholder="请输入单位" clearable />
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="支付设置" name="支付设置">
              <el-form ref="payForm" :rules="pays" :model="payForm" label-width="110px" class="demo-ruleForm">
                <el-col :span="24">
                  <el-form-item label="商品类型" prop="type">
                    <el-radio
                      v-for="item, index in payTypeList"
                      :key="index"
                      v-model="payForm.type"
                      :label="item.tag_value"
                      size="mini"
                    >{{ item.tag_name }}</el-radio>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 1 || payForm.type == 5 || payForm.type == 6 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="所需余额数量" prop="balance_price">
                    <el-input v-model="payForm.balance_price" type="number" placeholder="请输入所需余额数量" clearable />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付余额的数量</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 1 || payForm.type == 5 || payForm.type == 6 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="余额手续费" prop="balance_scale">
                    <el-input
                      v-model="payForm.balance_scale"
                      maxlength="3"
                      onkeyup="value=value.replace(/\D/g,'')"
                      show-word-limit
                      placeholder="请输入余额手续费"
                      clearable
                    />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 2 || payForm.type == 4 || payForm.type == 5 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="所需积分数量" prop="integral_price">
                    <el-input v-model="payForm.integral_price" type="number" placeholder="请输入所需积分数量" clearable />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付积分的数量</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 2 || payForm.type == 4 || payForm.type == 5 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="积分手续费" prop="integral_scale">
                    <el-input
                      v-model="payForm.integral_scale"
                      maxlength="3"
                      onkeyup="value=value.replace(/\D/g,'')"
                      show-word-limit
                      placeholder="请输入积分手续费"
                      clearable
                    />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 3 || payForm.type == 4 || payForm.type == 6 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="所需提货券数量" prop="voucher_price">
                    <el-input v-model="payForm.voucher_price" type="number" placeholder="请输入所需提货券数量" clearable />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">用户所需支付提货券的数量</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="payForm.type == 3 || payForm.type == 4 || payForm.type == 6 || payForm.type == 7"
                  :span="12"
                >
                  <el-form-item label="提货券手续费" prop="voucher_scale">
                    <el-input
                      v-model="payForm.voucher_scale"
                      type="number"
                      maxlength="3"
                      onkeyup="value=value.replace(/\D/g,'')"
                      show-word-limit
                      placeholder="请输入提货券手续费"
                      clearable
                    />
                    <span style="font-size: 12px;color: #ccc;letter-spacing: 1px;">例:50 支付时扣除50%手续费</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="商品详情">
              <el-form label-width="90px" class="demo-ruleForm">
                <el-col :span="24">
                  <el-form-item label="商品详情">
                    <tinymce-editor v-if="ruleForm.goods_detail" v-model="ruleForm.goods_detail" :height="500" />
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGoodsClose">取 消</el-button>
        <el-button v-if="currentStep !== 4" type="primary" @click="nextStepWay">下一步</el-button>
        <el-button v-else :loading="btnGoodsLoading" type="primary" @click="submitWay"> 提交</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      title="变更库存"
      :visible.sync="dialogInventory"
      width="500px"
      :before-close="dialogInventoryClose"
    >
      <el-row v-loading="loadingInventory" :gutter="20">
        <el-form ref="InventoryForms" :model="InventoryForms" label-width="100px" class="demo-ruleForm">
          <el-col :span="24">
            <el-form-item label="增减库存">
              <el-radio v-model="InventoryForms.product[0].action" label="inc">增加</el-radio>
              <el-radio v-model="InventoryForms.product[0].action" label="dec">减少</el-radio>
            </el-form-item>
            <el-form-item label="数量">
              <el-input
                v-model="InventoryForms.product[0].inventory"
                placeholder="请输入数量"
                class="box-content-input"
                type="number"
                min="0"
                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInventoryClose">取 消</el-button>
        <el-button type="primary" @click="submitInventoryWay('InventoryForms')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getCategoryList, addGoodsList, delGoodsList, GoodsStatusList, getGoodsDetail, editGoodsList, GoodsStockList } from '@/api/commodity/index'
import { getTagCategoryAll, getgroupList, getRegionList } from '@/api/user/index'
import { getsupplierAll, getLabelList, getSupplierGoodsInfo } from '@/api/supplier/index'
import { goodslist } from '@/api/supplier/index'
import { getDictionaryTypeList } from '@/api/index'
// 获取活动商品列表
import { getGoodsList as getGoodsListApi } from '@/api/activity/index'
import LogoUpload from '@/components/FileUpload'
import TinymceEditor from '@/components/Tinymce'
const tableTheadOption = {
  supplier_goods_id: {
    label: '产品ID',
    field: 'supplier_goods_id'
  },
  supplier_id: {
    label: '供应商ID',
    field: 'supplier_id'
  },
  name: {
    label: '名称',
    field: 'name'
  },
  sort: {
    label: '排序',
    field: 'sort'
  },
  subtitle: {
    label: '副标题',
    field: 'subtitle'
  },
  bn: {
    label: '编码',
    field: 'bn'
  }
}
const allTableThead = ['supplier_goods_id', 'supplier_id', 'name', 'sort', 'bn']
const defaultTableThead = ['name']
export default {
  name: 'SeckillGoodsList',
  components: { LogoUpload, TinymceEditor },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      // 商品列表加载框
      loading: false,
      // 商品列表
      GoodsList: [],
      // 商品列表总条数
      total: 0,
      // 商品类目列表
      categoryList: [],
      // 商品供应商列表
      supplierList: [],
      // 商品标签列表
      labelList: [],
      // 供应商商品列表
      goodsList: [],
      // 商品单位列表
      unitList: [],
      // 支付类型列表
      payTypeList: [],
      // 商品类型区分列表
      distinguishList: [],
      // 用户分组列表
      userGroupList: [],
      // 省市区列表
      regionList: [],
      // 搜搜参数
      searchForm: {
        keywords: '',
        cate_id: '',
        supplier_id: '',
        label_id: '',
        page: 1,
        count: 10,
        state: 'all',
        action: 'seckill',
        start_time: '2023-10-11 13:00:00',
        end_time: '2024-10-11 14:00:01'
      },
      // 添加商品弹框控制器
      addGoodsDialog: false,
      // 添加商品按钮提示框
      btnGoodsLoading: false,
      // 添加商品参数
      ruleForm: {
        supplier_id: '',
        supplier_goods_id: '',
        name: '',
        bn: '',
        subtitle: '',
        type: '',
        goods_label: [],
        cate_id: '',
        status: '',
        sort: '',
        main_image: '',
        thumbnail: '',
        carousel: '',
        notes: '',
        category_id1: '',
        category_id2: '',
        goods_detail: ''
      },
      rules: {
        name: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('商品名称不能为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        bn: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('商品编码不能为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        subtitle: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('商品副标题不能为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        type: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择商品类型'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        goods_label: [
          {
            required: true, validator: (rule, value, callback) => {
              if (value.length === 0) {
                callback(new Error('请选择商品标签'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        category_id1: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择商品类目'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        status: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择商品状态'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('商品排序不能为空'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        main_image: [
          {
            required: true, validator: (rule, value, callback) => {
              if (this.main_image === {}) {
                callback(new Error('请上传商品主图'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        thumbnail: [
          {
            required: true, validator: (rule, value, callback) => {
              if (this.thumbnail === {}) {
                callback(new Error('请选择商品缩略图'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        carousel: [
          {
            required: true, validator: (rule, value, callback) => {
              if (this.carousel.length === 0) {
                callback(new Error('请上传至少一张商品轮播图'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ]
      },
      // 添加商品库存规格参数
      inventoryForm: {
        image: '',
        initial_sales: '',
        scribe_price: '',
        retail_price: '',
        cost_price: '',
        inventory: '',
        sku: '',
        inventory_alert: '',
        unit: ''
      },
      inventorys: {
        image: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!this.image.url) {
                callback(new Error('请上传图片'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        initial_sales: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入初始销量'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        scribe_price: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入原售价'))
              } else {
                const req = /^\d+(\.\d{1,2})?$/
                if (req.test(value)) {
                  callback()
                } else {
                  callback(new Error('最多只能保留两位小数'))
                }
              }
            }, trigger: 'change'
          }
        ],
        retail_price: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入零售价'))
              } else {
                const req = /^\d+(\.\d{1,2})?$/
                if (req.test(value)) {
                  callback()
                } else {
                  callback(new Error('最多只能保留两位小数'))
                }
              }
            }, trigger: 'change'
          }
        ],
        cost_price: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入成本价'))
              } else {
                const req = /^\d+(\.\d{1,2})?$/
                if (req.test(value)) {
                  callback()
                } else {
                  callback(new Error('最多只能保留两位小数'))
                }
              }
            }, trigger: 'change'
          }
        ],
        inventory: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入库存'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        sku: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入sku'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        inventory_alert: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入库存预警'))
              } else {
                if (Number(value) > Number(this.inventoryForm.inventory)) {
                  callback(new Error('库存预警数量不能大于库存总量'))
                }
                callback()
              }
            }, trigger: 'change'
          }
        ],
        unit: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入单位'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ]
      },
      // 支付设置参数
      payForm: {
        type: '',
        balance_price: 0,
        balance_scale: 0,
        integral_price: 0,
        integral_scale: 0,
        voucher_price: 0,
        voucher_scale: 0
      },
      pays: {
        type: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择类型'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        balance_price: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 1 || this.payForm.type === 5 || this.payForm.type === 6 || this.payForm.type === 7) {
                if (!value) {
                  callback(new Error('请输入所需余额数量'))
                } else {
                  const req = /^\d+(\.\d{1,2})?$/
                  if (req.test(value)) {
                    callback()
                  } else {
                    callback(new Error('最多只能保留两位小数'))
                  }
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        balance_scale: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 1 || this.payForm.type === 5 || this.payForm.type === 6 || this.payForm.type === 7) {
                if (value <= 0) {
                  callback(new Error('请输入余额手续费'))
                } else {
                  if (Number(value) > 101) {
                    callback(new Error('手续费最大为100'))
                  }
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        integral_price: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 2 || this.payForm.type === 4 || this.payForm.type === 5 || this.payForm.type === 7) {
                if (value <= 0) {
                  callback(new Error('请输入所需积分数量'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        integral_scale: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 2 || this.payForm.type === 4 || this.payForm.type === 5 || this.payForm.type === 7) {
                if (value <= 0) {
                  callback(new Error('请输入积分手续费'))
                } else {
                  if (Number(value) > 101) {
                    callback(new Error('手续费最大为100'))
                  }
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        voucher_price: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 3 || this.payForm.type === 4 || this.payForm.type === 6 || this.payForm.type === 7) {
                if (value <= 0) {
                  callback(new Error('请输入所需提货券数量'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ],
        voucher_scale: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.payForm.type === 3 || this.payForm.type === 4 || this.payForm.type === 6 || this.payForm.type === 7) {
                if (value <= 0) {
                  callback(new Error('请输入提货券手续费'))
                } else {
                  if (Number(value) > 101) {
                    callback(new Error('手续费最大为100'))
                  }
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'change'
          }
        ]
      },
      // 销售设置参数
      saleForm: {
        // belong_type: '',
        sales_multiplier: '',
        related_user_tag: '',
        related_user_group: '',
        cover_region_json: '',
        is_recommendation: '0',
        is_restricted: '0',
        daily_purchase_limit: 0,
        total_purchase_limit: 0
      },
      sales: {
        sales_multiplier: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入销售倍数区间'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        // related_user_tag: [
        //   {
        //     required: true, validator: (rule, value, callback) => {
        //       if (this.related_user_tag.length == 0) {
        //         callback(new Error('关联用户标签不能为空'));
        //       } else {
        //         callback();
        //       }
        //     }, trigger: 'blur'
        //   }
        // ],
        // related_user_group: [
        //   {
        //     required: true, validator: (rule, value, callback) => {
        //       if (!value) {
        //         callback(new Error('请选择关联用户分组'));
        //       } else {
        //         callback();
        //       }
        //     }, trigger: 'blur'
        //   }
        // ],
        // cover_region_json: [
        //   {
        //     required: true, validator: (rule, value, callback) => {
        //       if (this.cascaderRegList.length == 0) {
        //         callback(new Error('请选择关联省市区地域'));
        //       } else {
        //         callback();
        //       }
        //     }, trigger: 'blur'
        //   }
        // ],
        is_recommendation: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择是否优选推荐'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        is_restricted: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请选择是否限购'))
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        daily_purchase_limit: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.saleForm.is_restricted === 1) {
                if (value <= 0) {
                  callback(new Error('每日限购数量不能为空'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ],
        total_purchase_limit: [
          {
            required: false, validator: (rule, value, callback) => {
              if (this.saleForm.is_restricted === 1) {
                if (value <= 0) {
                  callback(new Error('用户总限购数量不能为空'))
                } else {
                  callback()
                }
              } else {
                callback()
              }
            }, trigger: 'blur'
          }
        ]
      },
      // 选择商品下拉框加载状态
      selectLoading: false,
      // 添加商品切换商品信息
      addGoodsTabs: '基本信息',
      // 商品标签回显
      related_user_tag: [],
      // 商品类目回显
      cate_id: [],
      // 商品主图回显
      main_image: {},
      // 商品缩略图回显
      thumbnail: {},
      // 商品轮播图回显
      carousel: [],
      // 添加商品信息中图片回显
      image: {},
      // 添加商品信息中省市区区域回显
      cascaderRegList: [],
      // 关联用户标签名字回显
      related_user_tag_name: [],
      // 是否全部通过验证
      currentStep: 1,
      // 是否选择商品
      selectProduct: true,
      // 商品详情控制器
      goodsInfoDrawer: false, // 详情
      // 商品详情加载控制器
      goodsInfoLoading: false,
      activeNames: 'five',
      multipleSelection: [],
      // 详情是否处于编辑模式
      modifyShow: false,
      // 变更库存弹框控制器
      dialogInventory: false,
      // 加载控制
      loadingInventory: false,
      InventoryForms: {
        goods_id: '',
        product: [
          {
            id: '',
            inventory: '',
            action: 'inc'
          }
        ]
      },
      title: '',
      // 选中的商品列表

      choosedGoodsList: [],
      chooseGoodsSkuForm: {
        skuList: []
      },
      chooseGoodsSkuFormRules: {
        price: [{ required: true, message: '秒杀价格必填', trigger: 'blur' }],
        num: [{ required: true, message: '最多秒杀个数必填', trigger: 'blur' }],
        postage: [{ required: true, message: '配送方式必填', trigger: 'blur' }],
        inventory1: [{ required: true, message: '秒杀库存必填', trigger: 'blur' }]
      },
      chooosedGoodsSkuList: [], // 选中的商品规格列表
      // 秒杀活动的商品
      seckill: []

    }
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(i => valArr.indexOf(i) >= 0)
      this.tableKey = this.tableKey + 1
    }
  },
  created() {
    this.getListWay()
    this.getConfigurationWay()
  },
  methods: {
    // 获取搜索添加所用的所有的列表
    getConfigurationWay() {
      getCategoryList().then((res) => {
        this.categoryList = res.data
      })
      getsupplierAll().then((res) => {
        this.supplierList = res.data
      })
      getTagCategoryAll().then((res) => {
        this.labelList = res.data
      })
      goodslist({ page: 1, count: 20 }).then((res) => {
        this.goodsList = res.data.list
      })
      getLabelList().then((res) => {
        this.unitList = res.data
      })
      getDictionaryTypeList({ type: 'pay_type' }).then((res) => {
        this.payTypeList = res.data
      })
      getDictionaryTypeList({ type: 'goods_distinguish' }).then((res) => {
        this.distinguishList = res.data
      })
      getgroupList().then((res) => {
        this.userGroupList = res.data.list
      })
      getRegionList().then((res) => {
        this.regionList = res.data
      })
    },
    tabsListWay() {
      this.searchForm.page = 1
      this.searchForm.count = 10
      this.getListWay()
    },
    // 获取商品列表
    getListWay() {
      this.loading = true
      // getGoodsList(this.searchForm).then(res => {
      getGoodsListApi(this.searchForm).then(res => {
        this.loading = false
        // 给每个对象添加一个isDisabled字段
        res.data.list.forEach((item) => {
          item.isDisabled = true
        })
        this.GoodsList = res.data.list
        this.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    // 列表选中调用
    handleSelectionChange(val) {
      // this.multipleSelection = val
      // 修改后的
      this.choosedGoodsList = val
    },
    // 重置搜索条件
    resettingWay() {
      this.searchForm = {
        keywords: '',
        cate_id: '',
        supplier_id: '',
        label_id: '',
        page: 1,
        count: 10,
        action: 'seckill'
      }
      this.getListWay()
    },
    // 商品上下架
    goods_idWay(row) {
      this.loading = true
      GoodsStatusList({ goods_id: row.id }).then((res) => {
        this.loading = false
        this.$messages.success('修改成功')
      }).catch(() => {
        this.loading = false
        this.$messages.warning('修改失败')
      })
    },
    // 添加商品
    addGoodsWay() {
      this.title = '添加商品'
      this.resettingFormWay()
      this.addGoodsDialog = true
    },
    // 关闭弹框
    addGoodsClose() {
      this.resettingFormWay()
      this.addGoodsDialog = false
    },
    // 重置表单
    resettingFormWay() {
      this.modifyShow = false
      this.ruleForm = {
        supplier_id: '',
        supplier_goods_id: '',
        name: '',
        bn: '',
        subtitle: '',
        type: '',
        goods_label: [],
        cate_id: '',
        status: '',
        sort: '',
        main_image: '',
        thumbnail: '',
        carousel: '',
        notes: '',
        category_id1: '',
        category_id2: '',
        goods_detail: ''
      }
      this.inventoryForm = {
        image: '',
        initial_sales: '',
        scribe_price: '',
        retail_price: '',
        cost_price: '',
        inventory: '',
        sku: '',
        inventory_alert: '',
        unit: ''
      }
      this.payForm = {
        type: '',
        balance_price: 0,
        balance_scale: 0,
        integral_price: 0,
        integral_scale: 0,
        voucher_price: 0,
        voucher_scale: 0
      }
      this.saleForm = {
        // belong_type: '',
        sales_multiplier: '',
        related_user_tag: '',
        related_user_group: '',
        cover_region_json: '',
        is_recommendation: '0',
        is_restricted: '0',
        daily_purchase_limit: 0,
        total_purchase_limit: 0
      }
      this.related_user_tag = []
      this.cate_id = []
      this.main_image = {}
      this.thumbnail = {}
      this.carousel = []
      this.image = {}
      this.cascaderRegList = []
      // 是否选择商品
      this.selectProduct = true
      this.currentStep = 0
      this.addGoodsTabs = '基本信息'
    },
    // 下拉框搜索调用
    remoteMethodWay(query) {
      if (query !== '') {
        this.selectLoading = true
        goodslist({ page: 1, count: 20, keywords: query }).then((res) => {
          this.selectLoading = false
          this.goodsList = res.data.list
        })
      }
    },
    // 选择商品调用
    selectGoodsWay(val) {
      getSupplierGoodsInfo({ id: val }).then((res) => {
        this.ruleForm.name = res.data.goods_name
        this.ruleForm.supplier_id = res.data.supplier_id
        this.ruleForm.bn = res.data.bn
        this.ruleForm.subtitle = res.data.sub_title
        this.ruleForm.type = res.data.type
        this.ruleForm.status = res.data.status
        this.ruleForm.sort = res.data.sort
        this.ruleForm.goods_detail = res.data.goods_detail.detail
        this.main_image = {
          url: res.data.main_image
        }
        this.thumbnail = {
          url: res.data.thumbnail
        }
        res.data.slider_image.forEach((item) => {
          this.carousel.push({ url: item })
        })
        this.ruleForm.notes = res.data.remark
        this.selectProduct = false
        this.$forceUpdate()
      })
    },
    // 选择商品类目调用
    cate_idWay(vla) {
      if (vla.length !== 2) {
        this.ruleForm.category_id1 = vla[0]
      } else {
        if (vla.length === 3) {
          this.ruleForm.category_id1 = vla[0]
          this.ruleForm.category_id2 = vla[1]
          this.ruleForm.category_id3 = vla[2]
        } else {
          this.ruleForm.category_id1 = vla[0]
          this.ruleForm.category_id2 = vla[1]
        }
      }
    },
    // 商品主图的回调
    mainImageBack() { },
    // 商品缩略图的回调
    thumbnailBack() { },
    // 商品轮播图的回调
    carouselBack() { },
    // 商品图片的回调
    imageBack() { },
    // 点击下一步执行
    nextStepWay() {
      var bool = true
      if (!bool) {
        return false
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true
        } else {
          console.log('基本信息')
          this.currentStep = 1
          this.addGoodsTabs = '基本信息'
          this.$messages.warning('请填写基本信息必填项')
          bool = false
          return false
        }
      })
      if (!bool) {
        return false
      }
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          return true
        } else {
          this.currentStep = 2
          this.addGoodsTabs = '销售设置'
          this.$messages.warning('请填写销售设置必填项')
          bool = false
          return false
        }
      })
      if (!bool) {
        return false
      }
      this.$refs.inventoryForm.validate((valid) => {
        if (valid) {
          return true
        } else {
          this.currentStep = 3
          this.addGoodsTabs = '库存规格'
          this.$messages.warning('请填写库存规格必填项')
          bool = false
          return false
        }
      })
      if (!bool) {
        return false
      }
      this.$refs.payForm.validate((valid) => {
        if (valid) {
          return true
        } else {
          console.log('支付设置')
          this.currentStep = 3
          this.addGoodsTabs = '支付设置'
          this.$messages.warning('请填写支付设置必填项')
          bool = false
          return false
        }
      })
      if (!bool) {
        return false
      }
      if (!this.ruleForm.goods_detail) {
        this.currentStep = 4
        this.addGoodsTabs = '商品详情'
        this.$messages.warning('请填写商品详情')
        return this.$messages.warning('商品详情不能为空')
      } else {
        if (this.addGoodsTabs !== '商品详情') {
          this.addGoodsTabs = '商品详情'
          this.currentStep = 4
        } else {
          this.addGoodsTabs = '商品详情'
          this.currentStep = 4
        }
      }
      return
    },
    // 查看商品详情
    goodsInfoWay(row) {
      this.goodsInfoDrawer = true
      this.goodsInfoLoading = true
      getGoodsDetail({ goods_id: row.id }).then((res) => {
        var obj = JSON.parse(JSON.stringify(res.data))
        console.log(1)
        this.ruleForm.id = obj.id
        this.ruleForm.supplier_id = obj.supplier_id
        this.ruleForm.name = obj.name
        this.ruleForm.bn = obj.bn
        this.ruleForm.subtitle = obj.subtitle
        this.ruleForm.type = obj.type
        this.ruleForm.supplier_goods_id = obj.supplier_goods_id
        this.ruleForm.category1_name = obj.category1_name
        this.ruleForm.category2_name = obj.category2_name
        this.ruleForm.category3_name = obj.category3_name
        this.ruleForm.goods_label_name = obj.goods_label_name
        var arr1 = []
        this.ruleForm.goods_label = []
        arr1 = obj.goods_label.split(',')
        arr1.forEach((item) => {
          this.ruleForm.goods_label.push(Number(item))
        })
        this.ruleForm.status = obj.status
        this.ruleForm.sort = obj.sort
        this.ruleForm.notes = obj.notes
        this.main_image = {
          url: obj.main_image
        }
        this.thumbnail = {
          url: obj.thumbnail
        }
        var arr = obj.carousel.split(',')
        this.carousel = []
        arr.forEach((item) => {
          this.carousel.push({ url: item })
        })
        this.cate_id = []
        if (obj.category_id3 !== 0 && obj.category_id2 !== 0 && obj.category_id1 !== 0) {
          this.cate_id = [obj.category_id1, obj.category_id2, obj.category_id3]
        } else if (obj.category_id2 !== 0 && obj.category_id1 !== 0) {
          this.cate_id = [obj.category_id1, obj.category_id2]
        } else if (obj.category_id1 !== 0) {
          this.cate_id = [obj.category_id1]
        } else {
          this.cate_id = []
        }
        this.ruleForm.category_id1 = obj.category_id1
        this.ruleForm.category_id2 = obj.category_id2
        this.ruleForm.category_id3 = obj.category_id3
        console.log(2)
        // 销售设置

        this.saleForm.sales_multiplier = obj.market_info.sales_multiplier
        this.saleForm.related_user_group = obj.market_info.related_user_group ? Number(obj.market_info.related_user_group) : ''
        this.saleForm.cover_group_name = obj.market_info.cover_group_name
        this.saleForm.is_recommendation = String(obj.market_info.is_recommendation)
        this.saleForm.is_restricted = String(obj.market_info.is_restricted)
        this.saleForm.daily_purchase_limit = obj.market_info.daily_purchase_limit

        this.saleForm.total_purchase_limit = obj.market_info.total_purchase_limit
        this.saleForm.cover_region_name_list = obj.market_info.cover_region_name_list
        this.cascaderRegList = JSON.parse(obj.market_info.cover_region_json)
        this.related_user_tag = []
        if (obj.market_info.related_user_tag) {
          var arr2 = []
          arr2 = obj.market_info.related_user_tag.split(',')
          arr2.forEach((item) => {
            this.related_user_tag.push(Number(item))
          })
        }
        this.related_user_tag_name = []
        if (obj.market_info.cover_label_name) {
          var arr3 = []
          arr3 = obj.market_info.cover_label_name.split(',')
          arr3.forEach((item) => {
            this.related_user_tag_name.push(item)
          })
        }

        // 库存规格
        this.image = {
          url: obj.product[0].image
        }
        console.log(3)
        this.inventoryForm.initial_sales = obj.product[0].initial_sales
        this.inventoryForm.id = obj.product[0].id
        this.inventoryForm.scribe_price = obj.product[0].scribe_price
        this.inventoryForm.retail_price = obj.product[0].retail_price
        this.inventoryForm.cost_price = obj.product[0].cost_price
        this.inventoryForm.inventory = obj.product[0].inventory
        this.inventoryForm.sku = obj.product[0].sku
        this.inventoryForm.inventory_alert = obj.product[0].inventory_alert
        this.inventoryForm.unit = obj.product[0].unit
        // 支付设置
        this.payForm.type = Number(obj.product[0].pay_config.type)
        this.payForm.balance_price = obj.product[0].pay_config.balance_price
        this.payForm.balance_scale = obj.product[0].pay_config.balance_scale
        this.payForm.integral_price = obj.product[0].pay_config.integral_price
        this.payForm.integral_scale = obj.product[0].pay_config.integral_scale
        this.payForm.voucher_price = obj.product[0].pay_config.voucher_price
        this.payForm.voucher_scale = obj.product[0].pay_config.voucher_scale
        this.payForm.id = obj.product[0].pay_config.id
        // 商品详情
        this.ruleForm.goods_detail = obj.goods_detail
        this.selectProduct = false
        this.$forceUpdate()
      }).catch(() => {
        this.$messages.error('详情获取失败,请重试')
        this.selectProduct = false
        this.goodsInfoDrawer = false
        this.goodsInfoLoading = false
      })
    },
    // 取消编辑模式
    modifyShowCloseWay() {
      this.modifyShow = false
      this.goodsInfoWay(this.ruleForm)
      this.resettingFormWay()
    },
    // 切换显示模式
    modifyShowWay() {
      if (!this.modifyShow) {
        this.modifyShow = true
        this.$forceUpdate()
        return
      }
      this.submitWay()
    },
    // 编辑调用
    sendgoods(row) {
      this.goodsInfoDrawer = true
      this.goodsInfoWay(row)
      this.modifyShow = true
    },
    // 库存变更调起弹框
    inventoryChangeWay(row) {
      this.InventoryForms = {
        goods_id: row.id,
        product: [
          {
            id: row.product[0].id,
            inventory: '',
            action: 'inc'
          }
        ]
      }
      this.dialogInventory = true
    },
    // 库存变成弹框关闭
    dialogInventoryClose() {
      this.InventoryForms = {
        goods_id: '',
        product: [
          {
            id: '',
            inventory: '',
            action: 'inc'
          }
        ]
      }
      this.dialogInventory = false
    },
    // 库存变更提交
    submitInventoryWay(formName) {
      if (!this.InventoryForms.product[0].inventory) {
        return this.$messages.error('数量不能为空')
      }
      this.loadingInventory = true
      GoodsStockList(this.InventoryForms).then((res) => {
        this.$messages.success('修改成功')
        this.loadingInventory = false
        this.dialogInventoryClose()
        this.getListWay()
      }).catch((err) => {
        this.loadingInventory = false
        this.$messages.error(err.msg)
      })
    },
    // 提交调用
    submitWay() {
      this.ruleForm.main_image = this.main_image.url
      this.ruleForm.thumbnail = this.thumbnail.url
      var arr = []
      this.carousel.forEach((item) => {
        arr.push(item.url)
      })
      this.ruleForm.carousel = arr.toString()
      this.ruleForm.goods_label = this.ruleForm.goods_label.toString()
      this.inventoryForm.image = this.image.url
      this.saleForm.related_user_tag = JSON.parse(JSON.stringify(this.related_user_tag)).toString()
      this.saleForm.cover_region_json = JSON.stringify(this.cascaderRegList)
      var obj = {
        ...this.ruleForm,
        marketing_info: {
          ...this.saleForm
        },
        product: [
          {
            ...this.inventoryForm,
            pay_config: {
              ...this.payForm

            }
          }
        ]
      }
      this.btnGoodsLoading = true
      if (!obj.id) {
        addGoodsList(obj).then((res) => {
          this.btnGoodsLoading = false
          this.addGoodsDialog = false
          this.resettingFormWay()
          this.$messages.success('添加成功')
          this.getListWay()
        }).catch(() => {
          this.btnGoodsLoading = false
        })
      } else {
        editGoodsList(obj).then((res) => {
          this.btnGoodsLoading = false
          this.modifyShow = false
          this.resettingFormWay()
          this.goodsInfoWay(obj)
          this.$messages.success(res.msg)
          this.getListWay()
        }).catch(() => {
          this.btnGoodsLoading = false
        })
      }
    },
    // 删除商品
    deleteorder(row) {
      var _this = this
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delGoodsList({ goods_id: row.id }).then((res) => {
            _this.$messages({
              type: 'success',
              message: '删除成功!'
            })
            _this.getListWay()
          }).catch(() => {
            _this.$messages({
              type: 'info',
              message: '删除失败'
            })
          })
        })
        .catch(() => {
          _this.$messages({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 添加商品
    goodsadd() {
      this.$router.push('/commodity/goods/add/')
    },

    // 点击搜索
    search() {
      console.log(this.searchForm, '搜索的数据')
    },
    // 切换订单类型
    handleClick(tab, event) {
      console.log(tab, event)
    },

    // 分页选择调用
    handleSizeChange(val) {
      this.searchForm.count = val
      this.getListWay()
    },
    // 分页选择调用
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getListWay()
    },
    // ***************选择规格***************

    // 选中商品规格
    handleGoodsSkuSelectionChange(val) {
      // console.log('val===>', val)
      this.chooosedGoodsSkuList = val
    },
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    onTableSelect(rows, row) {
      // this.$refs.chooseGoodsSkuFormRef.resetFields()
      const selected = rows.length && rows.indexOf(row) !== -1
      console.log('rows==>', rows)
      console.log('row==>', row)
      if (selected) {
        const rowIndex = this.chooosedGoodsSkuList.findIndex(item => item.id === row.id)
        console.log('rowIndex===>', rowIndex)
        const fields = ['.price', '.num', '.postage', '.inventory1']
        let result = true // 是否校验成功
        for (const item of fields) {
          this.$refs.chooseGoodsSkuFormRef.validateField('skuList.' + rowIndex + item, err => {
            console.log('err==>', err)
            if (err !== '') {
              result = false
            }
          })
          if (!result) break
        }
        if (result) {
          this.$message.success('校验成功！')
        } else {
          this.$message.warning('请检查：有部分信息或图片尚未添加完整！')
        }
      }
    },
    // 单行表单校验方法
    // 【form】是需要校验的表单，就是表单中【ref】绑定的字段
    // 【index】是需要传入的行数，字段【scope.$index】
    validateField(form, index) {
      let result = true
      this.$nextTick(() => {
        console.log('this.$refs[form]=>', this.$refs[form])
      })
      for (const item of this.$refs[form].fields) {
        if (item.prop.split('.')[1] === index) {
          console.log('1111')
          this.$refs[form].validateField(item.prop, err => {
            if (err !== '') {
              result = false
            }
          })
        }
        if (!result) break
      }
      return result
    },
    // 对部分表单字段进行重置
    resetField(form, index) {
      this.$refs[form].fields.forEach(item => {
        if (item.prop.split('.')[1] === index) {
          item.resetField()
        }
      })
    },
    // 表格全选
    onTableSelectAll() {
      // this.$refs.chooseGoodsSkuFormRef.validate((valid) => {
      //   if (valid) {
      //     this.$message.success('校验成功！')
      //   } else {
      //     this.$message.warning('请注意表单校验！')
      //   }
      // })
    },

    // 取消当前的秒杀商品规格
    doCancelCurrentSku(row, index) {
      this.seckill = this.seckill.filter(item => item.product_id !== row.id)
    },
    //
    // 保存当前的秒杀商品规格
    doSaveCurrentSku(row, index) {
      // const form = 'chooseGoodsSkuFormRef' + row.id
      // this.validateField(form, index)
      this.seckill.push({
        goods_id: row.goods_id,
        product_id: row.id,
        price: row.price,
        num: row.num,
        postage: row.postage,
        inventory: row.inventory1
      })

      this.$emit('currentchoose', this.seckill)
    },
    // 行展开
    handleExpandChange(row) {
      // console.log('row===>', row)
      // this.chooseGoodsSkuForm.skuList = row.product
    }

  }
}
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.goodsaletr {
  border-radius: 5px;
  background-color: #f0faff;
  border: 1px solid #abdcff;
  color: #515a6e;
  font-size: 12px !important;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}
// .my-el-form-item{
//   ::v-deep .el-form-item__content{
//     margin-left: 0px !important;
//   }
// }
</style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
